<template>
    <div>
        <div class="logintomian">
            <div class="haredto">
                <span class="iconfont icon-xiangzuo" @click="$router.push('/Home')"></span> <span class="iconfont icon-wenhao"></span>
            </div>
            <div class="textto">
                <h3>
                    密码登录
                </h3>
                <p>Hi,欢迎来到豆果美食,会做饭很酷~</p>
            </div>
            <div class="inform">
                <div class="hone inforitem  mode">
                    <div><span>+86</span></div>
                    <input type="text" name="phone" v-model="phone" placeholder="请输入手机号/邮箱">
                </div>
                <div class="password inforitem mode" >
                    <input type="password" name="password" v-model="passwordyu" placeholder="密码" >
                </div>
                <div class="botton inforitem" @click="fromtodata">
                    <div>
                        登录
                    </div>
                </div>
                <div class="proved">
                    <span>验证码登录</span>
                    <span>忘记密码</span>
                </div>
                <div class="rest">
                    <div class="h3">
                        其他登入方式
                    </div>
                    <div class="boxitem">
                        <div class="item">
                            <span class="iconfont icon-huawei1"></span>
                        </div>
                         <div class="item">
                              <span class="iconfont icon-iconfontweixin"></span>
                        </div>
                         <div class="item">
                              <span class="iconfont icon-QQ"></span>
                            <!-- <img src="" =""> -->
                        </div>
                         <div class="item">
                              <span class="iconfont icon-weibo1 "></span>
                        </div>
                        <!-- -->
                    </div>
                </div>
                <div class="fotss">
                    <div class="wen">
                        <input type="checkbox" v-model="checkbox" @click="checkbox=!checkbox">
                        <!-- 方法一：用<u></u>标签方法二：用text-decoration：underline; -->
                        <div>
                            登入注册即表示同意 <u>&lt;&lt;用户协议&gt;&gt;</u> 和 <u>&lt;&lt;隐私政策&gt;&gt;</u>
                        </div>
                        
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
    data(){
        return{
            phone:"",
            passwordyu:"",
            checkbox:false,
            datamine:{
                phone:17677451729,
                password:123123,
            }
        }
    },
    methods:{
        fromtodata(){
            // console.log(this.phone);
           
            if(this.checkbox==true){

                let hponeto = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/;

                if(hponeto.test(this.phone)){
                    // console.log(this.passwordyu);
                    let data={
                        phone:this.phone,
                        password:this.passwordyu
                    }
                    if(data.password==this.datamine.password){
                        // console.log("12389");
                        let token =data ;
                       window.sessionStorage.setItem('token',JSON.stringify(token));//存数据
                        // console.log(hten);
                         this.$router.push("/Home")
                    }
                    // let hten = JSON.parse(sessionStorage.getItem('hten'));//取数据
                    // console.log(hten);

                }else{
                    Toast('请输入正确信息');
                }
            }else{
                Toast('未同意隐私政策');
            }
            
            
        }
    }
}
</script>

<style lang="less">
    .logintomian{
        width: 100%;
        height: 100%;
        position:fixed;
        z-index: 20;
        background-color: #ffffff;
        .haredto{
            width: 100%;
            height: 45px;
            display: flex;
            padding: 10px;
            box-sizing: border-box;
            justify-content: space-between;
            span{
                height: 30px;
                display: block;
                line-height: 30px;
                font-size: 20px;
            }
        }
        .textto{
            width: 95%;
            margin: auto;
            height: 110px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 30px;
            line-height: 30px;
            box-sizing: border-box;
            h3{
                font-size: 24px;
            }
            p{
                font-size: 10px;
                color:#b7b7b7;
            }
        }
        .inform{
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            .inforitem{
                width: 95%;
                height: 52px;
                margin: auto;
                margin-top: 30px;
                border-bottom: 1px solid #fafafa;
               
                &.botton{
                    div{
                        width: 100%;
                        height: 100%;
                        border-radius: 25px;
                        text-align: center;
                        line-height: 52px;
                       
                        font-size: 18px;
                        font-weight: 550;
                        color: #818181;
                        background-color: #f5f5f5;
                    }
                }
                &.hone{
                    position: relative;
                    padding-bottom: 19px;
                    box-sizing: border-box;
                    div{
                        width: 50px;
                        height: 40px;
                        text-align: center;
                        line-height: 38px;
                        padding-left: 10px;
                        box-sizing: border-box;
                        position: absolute;
                        font-size:18px;
                        display: flex;
                        justify-items: center;
                    }
                    input{
                        padding-left: 60px;
                        box-sizing: border-box;
                        background-color: #fafafa;
                    }
                }
            }
            .mode{
                 input{
                    width: 100%;
                    height: 40px;
                    font-size: 18px;
                    background-color: #fafafa;
                    border: 0px; 
                    outline:none;
                    border-radius: 18px;
                }
            }
            .password{
                input{
                    padding-left: 15px;
                    box-sizing: border-box;
                }
            }
            .proved{
                    width: 100%;
                    height: 30px;
                    margin-top: 10px;
                    padding-left: 10px;
                    padding-right: 10px;
                    box-sizing: border-box;
                    line-height: 30px;
                    display: flex;
                    justify-content:space-between;
                    span{
                        display: block;
                        // width: 50%;
                        font-size: 10px;
                        height: 100%;
                        color:#b7b7b7;
                    }
            }
            .rest{
                width: 100%;
                height: 100px;
                padding: 10px;
                margin-top: 60px;
                box-sizing: border-box;
                .h3{
                    width: 100%;
                    height: 30px;
                    text-align: left;
                    font-size: 10px;
                    color:#b7b7b7;

                }
                .boxitem{
                    width: 100%;
                    display: flex;
                    .item{
                        width: 33px;
                        height: 33px;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 20px;
                        img{
                            width: 100%;
                            margin: auto;
                            border-radius: 50%;
                            
                        }
                        span{
                            display: block;
                            width: 100%;
                            height: 100%;
                            font-size: 22px;
                            border-radius: 50%;
                            text-align: center;
                            line-height: 33px;
                            color: #ffffff;
                            &.icon-huawei1{  
                                background-color: #e8000d;
                            }
                            &.icon-iconfontweixin{
                                background-color: #4bd327;
                            }    
                            &.icon-QQ{
                                background-color: #48a9fc;
                            }
                            &.icon-weibo1{
                                background-color: #f45945;
                            }
                        }
                    }
                }
            }
            .fotss{
                width: 100%;
                height: 25px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                font-size: 12px;
                color:#b7b7b7;
                line-height: 25px;
                .wen{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    input{
                        border-radius: 50%;
                    }
                    u{
                        color:#5e5e5e;
                    }
                }
            }
        }
    }
</style>